/*
 * @Author: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @Date: 2022-10-16 18:56:43
 * @LastEditors: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @LastEditTime: 2022-10-20 13:33:13
 * @FilePath: \实训二——宏业找房\app\demo\src\page\Housing\index.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { useEffect, useState } from 'react'
import { Table, Space, Radio, Switch, Popconfirm, message, Button, Modal, Input, Pagination, Select, Form, Option } from 'antd';

import { httpGetAgent,httpDelAgent,httpAddAgent,httpEditAgent ,httpAble ,httpEnable} from '../../api/agent'

const Agent = () => {
  const {Option}=Select;
  // 房源数据
  const [data, setData] = useState([]);
  const [tel, setTel] = useState('')//手机号
  const [company, setCompany] = useState('')//公司
  const [chamber, setChamber] = useState('')//新房
  const [secondary, setSecondary] = useState('')//二手房
  const [rentHouse, setRentHouse] = useState('')//租房
  const [status, setStatus] = useState('')//状态
  const [isText, setIsText] = useState(true); //add/edit
  const [id, setId] = useState(); //编辑id
  
  const [pageCode, setPageCode] = useState(1);
  const [pageSize, setPageSize] = useState(4);
  const [total, setTotal] = useState(0);//总页数
  
    // 搜索内容
  const [one,setOne]=useState('');
  const [two, setTwo] = useState('');

  const [name, setName] = useState('')
  const [state, setState] = useState('')

  const [isModalOpen, setIsModalOpen] = useState(false);//弹框

  

  const columns = [
    {
      title: '序号',
      width: 30,
      dataIndex: 'id',
      key: 'id',
      fixed: 'left',
      render: (_, record, index) => (
        <span>{(pageCode - 1) * pageSize + index + 1}</span>
      ),
    },
    {
      title: '姓名',
      width: 60,
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '手机号',
      width: 50,
      dataIndex: 'tel',
      key: 'tel',
    },
    {
      title: '公司',
      width: 50,
      dataIndex: 'company',
      key: 'company',
    },
    {
      title: '新房',
      width: 20,
      dataIndex: 'chamber',
      key: 'chamber',
    },
    {
      title: '二手房',
      width: 80,
      dataIndex: 'secondary',
      key: 'secondary',
    },
    {
      title: '租房',
      width: 50,
      dataIndex: 'rentHouse',
      key: 'rentHouse',

    },
    {
      title: '状态',
      width: 30,
      dataIndex: 'status',
      key: 'status',
      // render: (_, { status }) => (
      //   <span>
      //    {status}
      //   </span>
      // ),
    },
    {
      title: '操作',
      key: 'operation',
      fixed: 'right',
      width: 90,
      render: (_, record) => (
        <Space size="middle">
          <a onClick={() => showModal(false, record)}>编辑</a>
          <Popconfirm title="确定删除吗?" onConfirm={() => handleDelete(record.id)}>
            <a>删除</a>
          </Popconfirm>
          <a onClick={() => handleAble(record.id)}>启用</a>
          <a onClick={() => handleEnable(record.id)}>禁用</a>
        </Space>
      ),
    },
  ];

  useEffect(() => {
    getData()
  }, [pageCode,name,state])


  // 获取经纪人数据
  const getData = async () => {
    const res = await httpGetAgent('/agent', { pageCode, pageSize, name, state });
    setData(res.data.list)
    setTotal(res.data.total)
  }
  // 经纪人启用
  const handleAble = async (id) => {
    console.log(id)
    const res = await httpAble('/able', { status:'启用', id });
    getData()
    message.success(res.data.msg);

  }
  // 经纪人禁用
  const handleEnable = async (id) => {
    console.log(id)
    const res = await httpEnable('/enable', { status: '禁用', id });
    getData()
    message.success(res.data.msg);
  }
   // 删除
  const handleDelete = async (id) => {
    console.log(11)
    const res = await httpDelAgent("/delAgent", { id })
    if ( res.data.code === 200) {
      message.success(res.data.msg);
      getData()
    } else {
      message.warning(res.data.msg);
    }

  }
  // 搜索
  const Search = () => {
    setName(one)
    setState(two)
  }
  // 下拉框
  const handleChange=(value)=>{
   setTwo(value)
  }
  // page页码改变
  const onPageChange = (page) => {
    setPageCode(page)
  };
  // 弹框
  const showModal = (type, obj) => {
    setIsText(type)
    setIsModalOpen(true);
    // 添加
    if (type) {
      setName("")
      setTel('')
      setCompany("")
      setChamber('')
      setSecondary("")
      setRentHouse('')
      setStatus('')
    } else {
      // 编辑
      setName(obj.name)
      setTel(obj.tel)
      setCompany(obj.company)
      setChamber(obj.chamber)
      setSecondary(obj.secondary)
      setRentHouse(obj.rentHouse)
      setStatus(obj.status)
      setId(obj.id)
    }
  };
  // 确认按钮
  const handleOk = async () => {
    if (isText) {
      // 添加
      const res = await httpAddAgent('/addAgent', { name, tel, company, chamber, secondary, rentHouse, status ,pageCode, pageSize })
      if (res.data.code === 200) {
        getData();
        message.success(res.data.msg);
      } else {
        message.warning(res.data.msg);
      }
    } else {
      // 编辑
      const res = await httpEditAgent('/editAgent', { name, tel, company, chamber, secondary, rentHouse, status, pageCode, pageSize, id })
      if (res.data.code === 200) {
        getData();
        message.success(res.data.msg);
      } else {
        message.warning(res.data.msg);
      }
    }
    setIsModalOpen(false);
  };
  // 弹框关闭
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  return (
    <div>
      <div style={{ display: 'flex', marginBottom:'20px'}}>
        搜索: <Input allowClear onChange={(e) => setOne(e.target.value)} style={{ width: '300px', height: '35px', marginRight: '10px' }} />
        <Select
          defaultValue="请选择"
          style={{
            width: 120,
          }}
          onChange={handleChange}
        >
          <Option value="在职">在职</Option>
          <Option value="离职">离职</Option>
        </Select>

        <Button type="default" onClick={Search}>查询</Button>
        <Button type="primary" onClick={() => showModal(true)} style={{ marginLeft: '10px' }}>新建</Button>
      </div>

      <Table
        columns={columns}
        dataSource={data}
        rowKey="id"
        pagination={false}
      />
      {/* 分页 */}
      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
        <Pagination current={pageCode} total={total} pageSize={pageSize} onChange={onPageChange} />
      </div>

      {/* 弹框 */}

      <Modal title={isText ? '添加' : '编辑'} open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
        <p>
          姓名: <Input style={{ width: '250px' }} value={name} onChange={(e) => setName(e.target.value)} />
        </p>
        <p>手机号: <Input style={{ width: '250px' }} value={tel} onChange={(e) => setTel(e.target.value)} /></p>
        <p>公司: <Input style={{ width: '250px' }} value={company} onChange={(e) => setCompany(e.target.value)} /></p>
        <p>新房: <Input style={{ width: '250px' }} value={chamber} onChange={(e) => setChamber(e.target.value)} /></p>
        <p>二手房: <Input style={{ width: '250px' }} value={secondary} onChange={(e) => setSecondary(e.target.value)} /></p>
        <p>租房: <Input style={{ width: '250px' }} value={rentHouse} onChange={(e) => setRentHouse(e.target.value)} /></p>
        <p>状态: <Input style={{ width: '250px' }} value={status} onChange={(e) => setStatus(e.target.value)} /></p>
      </Modal>

    </div>
  )
}
export default Agent;